<template>
  <div>
    <!-- 当前登录用户已经订阅的频道 -->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
        <!-- 点击切换状态 -->
        <van-button class="edit" size="mini" @click="isEditing = !isEditing">{{
          isEditing ? '完成' : '编辑'
        }}</van-button>
      </van-cell>
      <van-grid>
        <!-- 父传子3 数据渲染-->
        <!-- 子传父 -->
        <van-grid-item
          v-for="(channel, index) in channels"
          :key="channel.id"
          :class="{ red: index === curIndex }"
          @click.stop="hMyChannel(index)"
        >
          <span>{{ channel.name }}</span>
          <van-icon
            v-show="isEditing && index !== 0"
            name="cross"
            class="btn"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 可选频道-->
    <!-- 使用计算属性来显示可选频道，排除推荐频道中的选项 -->
    <div class="channel">
      <van-cell title="可选频道" :border="false"></van-cell>
      <van-grid>
        <van-grid-item
          v-for="channel in addChannels"
          :key="channel.id"
          @click="hAppendChannel(channel)"
        >
          <span>{{ channel.name }}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
// 导入API
import {
  appendChannels,
  getAllChannels,
  delChannel
} from '../../../api/articles'
export default {
  name: 'Channel',
  // 父传子，传递参数
  props: ['channels', 'curIndex'],
  data () {
    return {
      // 我的频道是否处于编辑状态
      isEditing: false,
      // 所有频道列表
      allChannels: []
    }
  },
  async created () {
    // 获取全部频道列表
    const res = await getAllChannels()
    // console.log(res)
    this.allChannels = res.data.data.channels
  },
  methods: {
    // 点击我的频道中的频道列表
    // 1、跳转，向父组件传递事件和下标
    // 2、删除
    hMyChannel (index) {
      if (this.isEditing) {
        // 在编辑状态时删除点击的频道
        this.doDelChannel(index)
      } else {
        // 向父组件传递事件
        this.$emit('change-channel', index)
      }
    },
    // 用户在可选的频道区域，点击了某一个频道，做增加
    async hAppendChannel (channel) {
      try {
        // 传入通过计算属性获得的arr
        //  1.1 将当前点击的频道，添加已选频道中
        //  1.2 做映射，组装成后端需要的样子
        //  1.3 它不能包含推荐频道
        // map() 方法创建一个新副本，其结果是该副本中的每个元素是调用一次提供的函数后的返回值。做操作后返回
        console.log('这是channel', channel)
        const arr = [...this.channels, channel].map((item, index) => {
          return {
            id: item.id,
            seq: index
          }
        })

        arr.splice(0, 1) // 去除推荐频道
        console.log('111122', arr)
        // 2调用接口
        const res = await appendChannels(arr)
        console.log(res)
        // 3更新视图
        //  (1) 从可选频道中删除这一项(计算属性会自动更新)
        //  (2) 在我的频道中添加这一项
        this.channels.push(channel)
        this.$toast.success('添加成功')
      } catch (err) {
        console.log(err)
        // this.$toast.fail('添加失败')
      }
    },
    async doDelChannel (index) {
      // 1根据下标找到id
      const id = this.channels[index].id
      // 2发请求
      try {
        const res = await delChannel(id)
        console.log(res)
        this.$toast.success('取消订阅')
        // 如果你删除的频道在当前的频道之前，则要去更新一下父组件中的active
        if (index < this.curIndex) {
          this.$emit('fix-curIndex-index')
        }
      } catch (err) {
        this.$toast.fali('取消订阅失败')
      }
      // 3. 更新视图
      //  从我的频道中，把当前项删除
      this.channels.splice(index, 1)
    }
  },
  computed: {
    // 可选频道
    addChannels () {
      // 保存数据的条件是：当前这个频道没有在已有频道中出现
      const arr = this.allChannels.filter(channel => {
        // 上句：如果channel在channels中没有出现过，则保留 注意形参是channel,在channels中找（过滤）
        const index = this.channels.findIndex(item => item.id === channel.id)
        // 上句：注意也是在channels中找不匹配channel的
        // 找到返回下标，没找到返回-1
        if (index === -1) {
          // 不存在，返回true，表示该元素通过测试，保留该元素，false则不保留。
          return true
        }
      })
      console.log('这是arr', arr)
      return arr
    }
  }
}
</script>

<style lang="less" scoped>
.edit {
  width: 80px;
  color: rgb(229, 97, 91) !important;
  margin-right: 10px;
  padding: 0 10px;
  border-color: rgb(229, 97, 91);
}
.channel {
  padding: 15px;
  font-size: 14px;
}
.btn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 16px;
}
// 高亮显示
.red {
  color: red;
  font-weight: bold;
  border: 1px solid red;
}
</style>
